<template>
    <div>
      <q-list bordered class="rounded-borders  no-shadow">
        <q-expansion-item
          @show="show"
          switch-toggle-side
          expand-separator
          header-class="bg-grey-2"
          label="品类"
        >
          <q-separator />
          <template v-slot:header>
            <div align="right" style="padding-top:5px;">品类</div>
            <div  style="position: absolute;right:0;z-index:86;margin-right:30px;">
            <q-btn outline color="nlack" :label="$t('保存')" @click.stop="add" style="margin-right:10px;"/>
            <q-btn outline color="nlack" :label="$t('编辑')" @click.stop="add"/>
            </div>
          </template>
          <q-tree
          style=""
          :nodes="data"
          node-key="id"
          color="primary"
          label-key="name"
          selected-color="primary"
          :selected.sync="selected"
          :ticked.sync="ticked"
          :tick-strategy="tickStrategy"
          ref="trees"
          :expanded.sync="nodeExpand">
          </q-tree>
        </q-expansion-item>
        <q-separator />
      </q-list>
    </div>
</template>

<script>

import { required } from 'vuelidate/lib/validators'
import { transformToTreeFormat } from 'src/utils/fns'
export default {
  name: 'leftNavs',
  props: {
    message: {
      type: String
    },
    nums: {
    }
  },
  data () {
    return {
      data: [],
      ticked: [],
      tickStrategy: 'leaf-filtered',
      selected: 0,
      tickType: 'strict',
      nodeExpand: [],
      nodeSelected: '',
      addOrEdit: 1,
      tab: '',
      parentId: '0',
      maximizedToggle: false,
      loadingSave: false,
      addOrEditDialog: false,
      addOrEditForm: {
        name: '',
        nameEn: '',
        increase: 1,
        remark: '',
        sn: '1',
        isLeaf: ''
      },
      typeOptions: [
        {
          label: '否',
          value: 0
        },
        {
          label: '是',
          value: 1
        }
      ]
    }
  },
  validations: {
    addOrEditForm: {
      name: { required },
      increase: { required },
      sn: { required }
    }
  },
  created () {
    // this.ticked = ['c92c1db151af4aff81976229d13afc13', '02e1614f7f6541c78c34a38979ad28e8', 'da2511796a2846e2b8470f92665fcbf5', 'd9e45dabe45b4d6bb0bcaab04dfda193', '444a72949d0143e0871a19b470ac1962', '2c07dbf3dcba4c36b793b6df4f082a31']
  },
  watch: {
    'ticked' () {
      console.log(this.ticked)
    },
    'message': {
      handler (message) {
        this.getTree()
      },
      deep: true
    }
    // 'nums': {
    //   handler (nums) {
    //     if (nums === '') {
    //       nums = ''
    //       this.getTree()
    //     } else {
    //       this.getTree()
    //     }
    //   },
    //   deep: true
    // }
  },
  methods: {
    show () {
      this.getTree()
    },
    async getTree () {
      await this.$api({
        method: 'post',
        url: `/mdm/categoryType/selectTypeAndCategoriesByTenantId`,
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          let datas = data
          for (let i in datas) {
            datas[i].header = 'inner'
            datas[i].footer = 'none'
            if (datas[i].children instanceof Array) {
              datas[i].children.map(item => {
                item.header = 'root'
                datas[i].children = transformToTreeFormat(datas[i].children, 'id', 'parentId', 'children')
              })
            }
          }
          console.log(datas)
          this.data = datas
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>
